<template>
  <div class="detail-page-wrap">
    <Breadcrumb :options="crumbOptions"></Breadcrumb>
    <div class="talent-body-wrap">
      <slot></slot>
      <div class="body-wrap">
        <TitleCard
          :title="title"
          :titles="titles"
          :selectedLabel="selectedLabel"
          :isSwitch="isSwitch"
          :showMore="false"
          @switchTitle="switchTitleHandle"
        >
          <template>
            <div
              class="contentItem-wrap"
              v-for="item in description"
              :key="item.title"
            >
              <!-- 自定义插槽 -->
              <template v-if="item.isCustom">
                <div class="title">{{ item.title }}</div>
                <slot :name="item.slotName" :instance="item"></slot>
              </template>
              <template v-else>
                <div class="title">{{ item.title }}</div>
                <div
                  class="content"
                  v-for="(content, index) in item.contents"
                  :key="index"
                  v-html="content"
                ></div>
              </template>
            </div>
          </template>
        </TitleCard>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/common/Breadcrumb'
import { getCurrentCrumb } from '@/utils/crumb.js'

export default {
  props: {
    description: Array,
    titleCardOptions: Object
  },
  data() {
    return {
      crumbOptions: [],
      isSwitch: false,
      title: '',
      selectedLabel: '',
      titles: []
    }
  },
  components: {
    Breadcrumb
  },
  mounted() {
    this.initSetting()
  },
  methods: {
    initSetting() {
      Object.assign(this, this.titleCardOptions)
      this.settingCrumb()
    },
    settingCrumb() {
      const { path } = this.$route
      const crumbOptions = getCurrentCrumb(path)
      this.crumbOptions = crumbOptions
    },
    switchTitleHandle(selectedItem) {
      const { id } = selectedItem
      this.selectedLabel = id
      this.$emit('switchTitle', id)
    }
  }
}
</script>
